<template>
  <div v-if="result" class="start">
    <div class="img" v-if="ress">
      <video
        :src="`${ress.data.url}`"
        controls="controls"
        :poster="`${result.data.cover}`"
      ></video>
    </div>
    <div class="name">
      <h1>《{{ result.data.name }}》</h1>
      <h2>作者：{{ result.data.artistName }}</h2>
      <div class="like" v-if="reg">
        <span
          ><i class="fa fa-heart" aria-hidden="true"></i> {{ reg.likedCount }}
        </span>
        <span
          ><i class="fa fa-share-square-o" aria-hidden="true"></i>
          {{ reg.shareCount }}</span
        >
      </div>
    </div>
    <div class="tag" v-show="result.data.videoGroup.length == 0 ? false : true">
      <h1>标签：</h1>
      <ul>
        <li v-for="index in result.data.videoGroup.length" :key="index">
          {{ result.data.videoGroup[index - 1].name }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "MV",
  props: {
    id: [String, Number],
  },
  data() {
    return {
      //   mvid: [],
      result: null,
      ress: null,
      reg: null,
    };
  },
  components: {},
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.axios.get(`/mv/detail?mvid=${vm.id}`).then((result) => {
        vm.result = result;
        // console.log(result);
      });
      next((vm) => {
        vm.axios.get(`/mv/url?id=${vm.id}&r=720`).then((ress) => {
          vm.ress = ress;
          // console.log(ress);
        });
        next((vm) => {
          vm.axios.get(`/mv/detail/info?mvid=${vm.id}`).then((reg) => {
            vm.reg = reg;
            // console.log(reg);
          });
        });
      });
    });
  },
};
</script>
<style scoped lang="less">
.start{
  padding-bottom: 60px;
}
.img {
  margin: 0 auto;
  padding-bottom: 10px;
  video {
    width: 100%;
  }
}
.name {
  h1 {
    font-size: 20px;
    padding: 5px 0;
  }
  h2 {
    padding: 5px 0;
  }
}
.like {
  padding: 5px 0;
  color: var(--cy-Color);
  display: flex;
  font-size: 20px;
  justify-content: space-evenly;
  // span{
  // }
}
.tag {
  h1 {
    font-size: 20px;
    padding: 5px 0;
  }
  ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    li {
      color: var(--cy-Color);
      line-height: 25px;
      background-color: #ffffff;
      text-align: center;
      padding: 2px 20px;
      margin: 5px;
      border-radius: 30px;
    }
  }
}
</style>